<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行系统</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
    <h1>Python Bank</h1>
    <hr>
    <button type="button" class="btn btn-primary">注册</button>
    <a type="button" class="btn btn-outline-secondary" href="/query">查询</a>
    <a type="button" class="btn btn-outline-success" href="/transfor">转账</a>
    <a type="button" class="btn btn-outline-warning" href="/deposit">存款</a>
    <a type="button" class="btn btn-outline-info" href="/changepwd">改密</a>
    <a type="button" class="btn btn-outline-dark" href="/">主页</a>
    <hr>
    <form>
        <div class="form-group row">
            <label for="username" class="col-sm-1 col-form-label">用户名</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="username">
            </div>
        </div>
        <div class="form-group row">
            <label for="phonenumber" class="col-sm-1 col-form-label">手机号</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="phonenumber">
            </div>
        </div>
        <div class="form-group row">
            <label for="id_number" class="col-sm-1 col-form-label">身份证</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="id_number">
            </div>
        </div>
        <div class="form-group row">
            <label for="password" class="col-sm-1 col-form-label">密码</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="password">
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-6">
                <button type="button" class="btn btn-primary" onclick="signup()">注册</button>
            </div>
        </div>
        <div class="card" style="width: 18rem;display: none">
            <div class="card-body">
                <h5 class="card-title" id="card_number"></h5>
                <h6 class="card-subtitle mb-2 text-muted">Python Bank</h6>
                <p class="card-text">注册成功，请牢记您的卡号和密码</p>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    function signup() {
        //获取表单输入
        var username = $('#username').val();
        var phonenumber = $('#phonenumber').val();
        var id_number = $('#id_number').val();
        var password = $('#password').val();
        //使用$.ajax()发送异步请求
        $.post({
            url: "signup_action/",//请求路径，最后一个单斜杠不能丢
            dataType: "json",//设置接受到的响应数据的格式，必须写json，否则无法取值
            data: {
                "username": username,
                "phonenumber": phonenumber,
                "id_number": id_number,
                "password": password,
                // 必须加CSRF，否则报403
                "csrfmiddlewaretoken": '{{ csrf_token }}'
            },
            success: function (data) {
                $("#card_number").text(data.card_number);
                $(".card").css('display','');
            },//响应成功后的回调函数
            error: function () {
                alert("出错啦");
            }//表示如果请求响应出现错误，会执行的回调函数
        });
    }
</script>
</html>